<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
	<title>jQuery treeView</title>
	
	<link rel="stylesheet" href="resources/css/tree/jquery.treeview.css" />
    <link rel="stylesheet" href="resources/css/tree/red-treeview.css" />
	<link rel="stylesheet" href="resources/css/tree/screen.css" />
	<script src="resources/js/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="resources/js/tree/jquery.cookie.js" type="text/javascript"></script>
	<script src="resources/js/tree/jquery.treeview.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		
		// fourth example
		$("#black, #gray").treeview({
			control: "#treecontrol",
			persist: "cookie"
		});

	});
	</script>
	<style type="text/css">
	  	#black.treeview li { background: url(resources/images/tree/black/tv-item.gif) 0 0 no-repeat; }
	  	#black.treeview .collapsable { background-image: url(resources/images/tree/black/tv-collapsable.gif); }
	  	#black.treeview .expandable { background-image: url(resources/images/tree/black/tv-expandable.gif); }
	  	#black.treeview .last { background-image: url(resources/images/tree/black/tv-item-last.gif); }
	  	#black.treeview .lastCollapsable { background-image: url(resources/images/tree/black/tv-collapsable-last.gif); }
	  	#black.treeview .lastExpandable { background-image: url(resources/images/tree/black/tv-expandable-last.gif); }
	  	
	  	#gray.treeview li { background: url(resources/images/tree/gray/tv-item.gif) 0 0 no-repeat; }
	  	#gray.treeview .collapsable { background-image: url(resources/images/tree/gray/tv-collapsable.gif); }
	  	#gray.treeview .expandable { background-image: url(resources/images/tree/gray/tv-expandable.gif); }
	  	#gray.treeview .last { background-image: url(resources/images/tree/gray/tv-item-last.gif); }
	  	#gray.treeview .lastCollapsable { background-image: url(resources/images/tree/gray/tv-collapsable-last.gif); }
	  	#gray.treeview .lastExpandable { background-image: url(resources/images/tree/gray/tv-expandable-last.gif); }
	  	
	</style>
	</head>
	<body>
	

	<div id="main">
	
	<h4>Sample 3 - two trees with one tree control, black and gray image set, with cookie-based state-saving</h4>
	<div id="treecontrol">
		<a href="#">Collapse All</a>
		<a href="#">Expand All</a>
		<a href="#">Toggle All</a>
	</div>
	<ul id="black">
		<li>Item 1</li>
		<li>
			<span>Item 2</span>
			<ul>
				<li>
					<span>Item 2.1</span>
					<ul>
						<li>Item 2.1.1</li>
						<li>Item 2.1.2</li>
					</ul>
				</li>
				<li>Item 2.2</li>
				<li class="closed">
					<span>Item 2.3 (closed at start)</span>
					<ul>
						<li>Item 2.3.1</li>
						<li>Item 2.3.2</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
	<ul id="gray">
		<li>Item 3</li>
		<li>
			<span>Item 4</span>
			<ul>
				<li class="closed">
					<span>Item 2.1 (closed at start)</span>
					<ul>
						<li>Item 2.1.1</li>
						<li>Item 2.1.2</li>
					</ul>
				</li>
				<li>Item 2.2.1</li>
				<li>Item 2.2.2</li>
				<li>Item 2.2.3</li>
				<li>Item 2.2.4</li>
				<li>Item 2.2.5</li>
				<li>Item 2.2.6</li>
				<li>Item 2.2.7</li>
				<li>Item 2.2.8</li>
				<li>
					<span>Item 2.3</span>
					<ul>
						<li>Item 2.3.1</li>
						<li>Item 2.3.2</li>
						<li>Item 2.3.3</li>
						<li>Item 2.3.4</li>
						<li>Item 2.3.5</li>
						<li>Item 2.3.6</li>
						<li>Item 2.3.7</li>
						<li>Item 2.3.8</li>
						<li>Item 2.3.9</li>
					</ul>
				</li>
				<li>
					<span>Item 2.4</span>
					<ul>
						<li>Item 2.4.1</li>
						<li>Item 2.4.2</li>
						<li>Item 2.4.3</li>
						<li>Item 2.4.4</li>
						<li>Item 2.4.5</li>
						<li>Item 2.4.6</li>
						<li>Item 2.4.7</li>
						<li>Item 2.4.8</li>
						<li>Item 2.4.9</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>Item 5</li>
	</ul>	
	
</div>
 
</body></html>